<template>
  <Navigator />
  <div :class="['navigatorContainer', { isDark }]">
    <div class="item">
      <el-select v-model="lang" size="small" style="width: 100px" @change="onLangChange">
        <el-option v-for="item in langList" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </div>
    <div class="item">
      <el-tooltip effect="dark" :content="$t('navigatorToolbar.backToRoot')" placement="top">
        <div class="btn iconfont-chaojizhiku icondingwei" @click="backToRoot" />
      </el-tooltip>
    </div>
    <div class="item">
      <div class="btn iconfont-chaojizhiku iconsousuo" @click="showSearch" />
    </div>
    <div class="item">
      <MouseAction :isDark="isDark" />
    </div>
    <div class="item">
      <el-tooltip
        effect="dark"
        :content="openMiniMap ? $t('navigatorToolbar.closeMiniMap') : $t('navigatorToolbar.openMiniMap')"
        placement="top"
      >
        <div class="btn iconfont-chaojizhiku icondaohang1" @click="toggleMiniMap" />
      </el-tooltip>
    </div>
    <div class="item">
      <el-tooltip
        effect="dark"
        :content="isReadonly ? $t('navigatorToolbar.edit') : $t('navigatorToolbar.readonly')"
        placement="top"
      >
        <div
          class="btn iconfont-chaojizhiku"
          :class="[isReadonly ? 'iconyanjing' : 'iconbianji1']"
          @click="readonlyChange"
        />
      </el-tooltip>
    </div>
    <div class="item">
      <Fullscreen :isDark="isDark" />
    </div>
    <div class="item">
      <Scale :isDark="isDark" />
    </div>
    <div class="item">
      <div class="btn iconfont-chaojizhiku" :class="[isDark ? 'iconmoon_line' : 'iconlieri']" @click="toggleDark" />
    </div>
  </div>
</template>

<script>
import Scale from "../Scale.vue"

import Navigator from "../Navigator.vue"
import Fullscreen from "../Fullscreen.vue"
import MouseAction from "../MouseAction.vue"
import { langList } from "@mind/config"
import i18n from "@mind/i18n"
import { storeLang, getLang } from "@mind/utils/mind-store"
import { mapState, mapActions } from "pinia"
import pkg from "simple-mind-map/package.json"
import { useMind } from "@mind/store"
/**
 * @Desc: 导航器工具栏
 */
export default {
  name: "NavigatorToolbar",
  components: {
    Navigator,
    Scale,
    Fullscreen,
    MouseAction
  },
  data() {
    return {
      version: pkg.version,
      langList,
      lang: "",
      openMiniMap: false
    }
  },
  computed: {
    ...mapState(useMind, ["isDark", "isReadonly"])
  },
  created() {
    this.lang = getLang()
  },
  methods: {
    ...mapActions(useMind, ["setIsDark", "setIsReadonly"]),

    readonlyChange() {
      this.setIsReadonly(!this.isReadonly)
      this.$bus.mindMap.setMode(this.isReadonly ? "readonly" : "edit")
    },

    toggleMiniMap() {
      this.openMiniMap = !this.openMiniMap
      this.$bus.$emit("toggle_mini_map", this.openMiniMap)
    },

    onLangChange(lang) {
      i18n.global.locale = lang
      storeLang(lang)
      this.$bus.$emit("lang_change")
    },

    showSearch() {
      this.$bus.$emit("show_search")
    },

    toggleDark() {
      this.setIsDark(!this.isDark)
    },

    backToRoot() {
      this.$bus.mindMap.renderer.setRootNodeCenter()
    }
  }
}
</script>

<style lang="less" scoped>
.navigatorContainer {
  position: relative;
  padding: 0 12px;
  background: hsla(0, 0%, 100%, 0.8);
  border-radius: 5px;
  opacity: 0.8;
  height: 44px;
  font-size: 12px;
  display: flex;
  align-items: center;
  overflow-x: scroll;
  box-sizing: border-box;
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  &.isDark {
    background: #262a2e;

    .item {
      a {
        color: hsla(0, 0%, 100%, 0.6);
      }

      .btn {
        color: hsla(0, 0%, 100%, 0.6);
      }
    }
  }

  .item {
    margin-right: 20px;

    &:last-of-type {
      margin-right: 0;
    }

    a {
      color: #303133;
      text-decoration: none;
    }

    .btn {
      cursor: pointer;
      font-size: 18px;
    }
  }
}

@media screen and (max-width: 590px) {
  .navigatorContainer {
    overflow-y: hidden;
    height: 60px;
  }
}
</style>
